<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改密码</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link  type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>
  <style>
    /* 保持与登录页面一致的样式 */
    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #FFD700 0%, #1E90FF 100%);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      position: relative;
    }

    .modify-container {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      width: 400px;
      padding: 40px 30px;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 10;
    }

    .modify-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .modify-header h2 {
      color: #FFD700;
      font-weight: 700;
      margin-bottom: 5px;
      font-size: 28px;
      background: linear-gradient(45deg, #FFD700, #1E90FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .el-form-item {
      margin-bottom: 25px;
    }

    .el-button {
      width: 48%;
      height: 45px;
      font-size: 16px;
      border-radius: 25px;
      letter-spacing: 1px;
      transition: all 0.3s;
      background: linear-gradient(45deg, #FFD700, #1E90FF);
      border: none;
    }

    .el-button:hover {
      transform: scale(1.02);
      box-shadow: 0 8px 20px rgba(30, 144, 255, 0.4);
    }

    .button-group {
      display: flex;
      justify-content: space-between;
    }

    @media (max-width: 480px) {
      .modify-container {
        width: 90%;
        padding: 30px 20px;
      }
    }
  </style>
</head>
<body>
<div id="app" class="modify-container">
  <div class="modify-header">
    <h2>修改密码</h2>
  </div>
  <el-form :model="modifyForm" ref="modifyForm" :rules="rules" class="modify-form">
    <el-form-item prop="oldPassword">
      <el-input
              v-model="modifyForm.oldPassword"
              type="password"
              placeholder="请输入原密码"
              prefix-icon="el-icon-lock"
              show-password></el-input>
    </el-form-item>
    <el-form-item prop="newPassword">
      <el-input
              v-model="modifyForm.newPassword"
              type="password"
              placeholder="请输入新密码"
              prefix-icon="el-icon-lock"
              show-password></el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input
              v-model="modifyForm.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              prefix-icon="el-icon-lock"
              show-password></el-input>
    </el-form-item>
    <div class="button-group">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-form>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else if (value.length < 5) {
          callback(new Error('密码长度不能少于5位'));
        } else {
          if (this.modifyForm.confirmPassword !== '') {
            this.$refs.modifyForm.validateField('confirmPassword');
          }
          callback();
        }
      };
      var validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'));
        } else if (value !== this.modifyForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        modifyForm: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        rules: {
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassword: [
            { validator: validatePass, trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: validatePassCheck, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.modifyForm.validate((valid) => {
          if (valid) {
            // 修复点1：移除中间插入的console.log
            axios.post('/user/updatePassword', {
              oldPassword: this.modifyForm.oldPassword,
              newPassword: this.modifyForm.newPassword,
              confirmPassword: this.modifyForm.confirmPassword
            })
                    .then(response => {
                      if (response.data.code === 200) {
                        this.$message.success('密码修改成功');
                        // 跳转到登录页
                        window.location.href = '/html/back/login.html';
                      } else {
                        this.$message.error(response.data.message);
                      }
                    })
                    .catch(error => {
                      console.error('请求错误:', error);
                      this.$message.error('密码修改失败，请重试');
                    });
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.modifyForm.resetFields();
      }
    }
  });
</script>
</body>
</html>